        <?php if (1 == $showKeywordStatus): ?>
        <!-- 关键词编辑区域 -->
        <div class="fixed top-[calc(24rem+1.5rem)] right-24 w-[calc(16.666667%-1.5rem)] bg-white rounded-xl shadow-lg p-4">
            <h3 class="text-lg font-bold text-gray-800 mb-3">本页关键词：</h3>
            <ul id="keyword-list" class="space-y-2">
                <?php if (!empty($keywords)): ?>
                    <?php foreach ($keywords as $keyword): ?>
                        <li class="keyword-item bg-sky-100 rounded-md px-2 py-1 flex justify-between items-center">
                            <span><?= $keyword ?></span>
                            <?php if ("研学" != $keyword): ?>
                            <!-- 使用 Font Awesome 叉号图标替换 X -->
                            <button class="delete-keyword bg-transparent border-none text-red-500 hover:text-red-700" data-keyword="<?= $keyword ?>" data-page-id="<?= $location['id'] ?>">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                            <?php endif; ?>
                        </li>
                    <?php endforeach; ?>
                <?php else: ?>
                    <li>暂无关键词</li>
                <?php endif; ?>
            </ul>
            <p> </p>
            
            <?php if (1 == $editKeywordStatus): ?>
            
            <h3 class="text-sm font-bold text-gray-800 mb-3">设置关键词</h3>
            <form action="<?= site_url('/yanxue/set_keyword') ?>" method="post" id="keyword-form">
                <input type="text" name="keyword" id="keyword" class="border border-gray-300 rounded p-2 w-full mb-2" placeholder="输入关键词">
                <input type="hidden" name="page_id" value="<?= $location['id'] ?>">
                <button type="submit" class="bg-primary text-white py-2 px-4 rounded hover:bg-primary-dark" id="add-keyword-button">增加关键词</button>
            </form>
            <?php endif; ?>

        </div>

        <?php endif; ?>


//selection form

                <!-- 表单 -->
        <form id="selection-form" action="<?= site_url('/selection/submit') ?>" method="post">
            <!-- 班级选择和学生姓名放在一行 -->
        <section class="bg-white rounded-xl shadow-lg p-6 mb-8 transform transition-all duration-500 hover:shadow-xl grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 班级选择 -->
            <div>
                <h2 class="section-title"><i data-name="五（1）班" class="fa-solid fa-users"></i>班级</h2>
                <div class="flex flex-col sm:flex-row gap-4" id="className">
                    <div class="option-card flex-1">
                        <div class="option-label">
                            <span class="option-text">五（1）班</span>
                            <i class="fa-solid fa-check-circle option-icon"></i>
                        </div>
                        <input type="radio" name="className" value="五（1）班" class="hidden location-radio">
                    </div>
                    <div class="option-card flex-1">
                        <div class="option-label">
                            <span class="option-text">五（2）班</span>
                            <i class="fa-solid fa-check-circle option-icon"></i>
                        </div>
                        <input type="radio" name="className" value="五（2）班" class="hidden location-radio">
                    </div>
                </div>
            </div>
            <!-- 学生姓名 -->
            <div>
                <h2 class="section-title"><i class="fa-solid fa-user"></i>学生姓名</h2>
                <input type="text" name="student_name" id="student_name" 
                       class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50"
                       placeholder="请输入您的姓名">
            </div>
        </section>

            <!-- 三个选择按列排列 -->
<!-- 三个选择并排排列 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <!-- 第一选择 -->
    <section class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl">
        <h2 class="section-title"><i class="fa-solid fa-star text-yellow-500"></i>第一选择</h2>
        <div id="first-choice" class="grid grid-cols-1 gap-4">
            <?php foreach($studyLocations as $location): ?>
            <div class="option-card" data-id="<?= $location['id'] ?>" data-name="<?= $location['name'] ?>">
                <div class="option-label">
                    <span class="option-text"><?= $location['name'] ?></span>
                    <i class="fa-solid fa-check-circle option-icon"></i>
                </div>
                <input type="radio" name="firstChoice" value="<?= $location['name'] ?>" class="hidden location-radio">
            </div>
            <?php endforeach; ?>
        </div>
    </section>

    <!-- 第二选择 -->
    <section class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl">
        <h2 class="section-title"><i class="fa-solid fa-star-half-stroke text-yellow-400"></i>第二选择</h2>
        <div id="second-choice" class="grid grid-cols-1 gap-4">
            <?php foreach($studyLocations as $location): ?>
            <div class="option-card" data-id="<?= $location['id'] ?>" data-name="<?= $location['name'] ?>">
                <div class="option-label">
                    <span class="option-text"><?= $location['name'] ?></span>
                    <i class="fa-solid fa-check-circle option-icon"></i>
                </div>
                <input type="radio" name="secondChoice" value="<?= $location['name'] ?>" class="hidden location-radio">
            </div>
            <?php endforeach; ?>
        </div>
    </section>

    <!-- 第三选择 -->
    <section class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl">
        <h2 class="section-title"><i class="fa-solid fa-star text-gray-400"></i>第三选择</h2>
        <div id="third-choice" class="grid grid-cols-1 gap-4">
            <?php foreach($studyLocations as $location): ?>
            <div class="option-card" data-id="<?= $location['id'] ?>" data-name="<?= $location['name'] ?>">
                <div class="option-label">
                    <span class="option-text"><?= $location['name'] ?></span>
                    <i class="fa-solid fa-check-circle option-icon"></i>
                </div>
                <input type="radio" name="thirdChoice" value="<?= $location['name'] ?>" class="hidden location-radio">
            </div>
            <?php endforeach; ?>
        </div>
    </section>
</div>
            <!-- 结果显示 -->
            <!-- 结果显示 -->
<section class="bg-white rounded-xl shadow-lg p-6 mt-8 transform transition-all duration-500 hover:shadow-xl">
    <h2 class="section-title"><i class="fa-solid fa-list-check"></i>你的选择</h2>
    <div id="selection-results" class="result-card">
        <div id="combined-result" class="text-gray-700">
            请选择班级、填写姓名并选择研学地点
        </div>
    </div>
</section>

            <!-- 提交按钮 -->
            <div class="text-center mt-8">
                <button type="submit" id="submit-btn" class="btn-submit" disabled>
                    <i class="fa-solid fa-paper-plane mr-2"></i>提交选择
                </button>
            </div>
        </form>



        <script>
        // 研学地点选项数据
        const studyLocations = <?php echo json_encode($studyLocations); ?>;

        // 用户选择存储
        let userSelections = {
            className: null,
            studentName: '',
            first: null,
            second: null,
            third: null
        };

        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            setupOptionListeners();
            setupNameInputListener();
            updateSubmitButton();
        });

           // 设置选项点击事件
        function setupOptionListeners() {
            // 班级选择
            document.querySelectorAll('input[name="className"]').forEach(input => {
                input.addEventListener('change', () => {
                    userSelections.className = input.value;
                    updateOptionUI(); // 添加这一行，更新选项UI
                    updateSubmitButton();
                });
            });
        
            // 研学地点选择
            const optionCards = document.querySelectorAll('.option-card');
            optionCards.forEach(card => {
                card.addEventListener('click', () => {
                    let name;
                    const sectionTitle = card.closest('section').querySelector('.section-title').textContent;
                    if (sectionTitle.includes('班级')) {
                        // 处理班级选择
                        name = card.querySelector('input').value;
                        userSelections.className = name;
                    } else {
                        // 处理研学地点选择
                        name = card.dataset.name;
                    }
                    console.log("setupOptionListeners " + name);
                    const level = sectionTitle.includes('第一') 
                    ? 'first' 
                    : sectionTitle.includes('第二') 
                        ? 'second' 
                        : 'third';
                    
                        // 传递卡片元素给 updateUserSelection
                    updateUserSelection(level, name, card);
                    // 更新UI
                    updateOptionUI();
                    updateResultsDisplay();
                    updateSubmitButton();
                });
            });
        }

        // 设置姓名输入监听
        function setupNameInputListener() {
            const nameInput = document.getElementById('student_name');
            nameInput.addEventListener('input', () => {
                userSelections.studentName = nameInput.value.trim();
                updateSubmitButton();
            });
        }

        // 更新用户选择
        function updateUserSelection(level, name, card) {
            const input = card.querySelector('input');
            
            // 取消当前层级的其他选择
            document.querySelectorAll(`input[name="${level}Choice"]`).forEach(radio => {
                radio.checked = (radio === input);
            });
            
            // 更新选择状态
            userSelections[level] = input.checked ? name : null;
        }

        // 更新选项UI
        function updateOptionUI() {
            // 重置所有选项样式
            document.querySelectorAll('.option-card').forEach(card => {
                card.classList.remove('selected');
                card.querySelector('.option-icon').classList.remove('opacity-100');
                card.querySelector('.option-icon').classList.add('opacity-0');
                card.style.display = 'block'; // 显示所有选项
            });
            
            // 设置班级选择的样式
            if (userSelections.className) {
                const className = userSelections.className;
                const classCard = document.querySelector(`input[name="className"][value="${className}"]`).closest('.option-card');
                if (classCard) {
                    classCard.classList.add('selected');
                    classCard.querySelector('.option-icon').classList.remove('opacity-0');
                    classCard.querySelector('.option-icon').classList.add('opacity-100');
                }
            }
        
            // 设置已选择的选项样式
            Object.keys(userSelections).forEach(level => {
                if (level === 'className' || level === 'studentName') return;
        
                if (userSelections[level]) {
                    const card = document.querySelector(`input[name="${level}Choice"][value="${userSelections[level]}"]`).closest('.option-card');
                    card.classList.add('selected');
                    card.querySelector('.option-icon').classList.remove('opacity-0');
                    card.querySelector('.option-icon').classList.add('opacity-100');
                }
            });
        
            // 隐藏已被第一选择选中的选项在第二和第三选择中
            if (userSelections.first) {
                document.querySelectorAll('#second-choice .option-card, #third-choice .option-card').forEach(card => {
                    if (card.dataset.name === userSelections.first) {
                        card.style.display = 'none';
                    }
                });
            }
        
            // 如果第二选择有值，隐藏第三选择中相同的选项
            if (userSelections.second) {
                document.querySelectorAll('#third-choice .option-card').forEach(card => {
                    if (card.dataset.name === userSelections.second) {
                        card.style.display = 'none';
                    }
                });
            }
        }

        // 更新结果显示
        function updateResultsDisplay() {
            const className = userSelections.className || '未选择班级';
            const studentName = userSelections.studentName || '未填写姓名';
            const firstChoice = userSelections.first || '未选择';
            const secondChoice = userSelections.second || '未选择';
            const thirdChoice = userSelections.third || '未选择';
            
            const combinedResult = document.getElementById('combined-result');
            combinedResult.textContent = `${className}的${studentName}同学的选择是：第一选择${firstChoice}，第二选择${secondChoice}，第三选择${thirdChoice}`;
            
            // 添加结果动画效果
            combinedResult.classList.add('animate-pulse');
            setTimeout(() => combinedResult.classList.remove('animate-pulse'), 500);
        }

        // 更新提交按钮状态
        function updateSubmitButton() {
            const submitBtn = document.getElementById('submit-btn');
            const isClassSelected = !!userSelections.className;
            const isNameFilled = userSelections.studentName.length > 0;
            const isFirstSelected = !!userSelections.first;
            const isSecondSelected = !!userSelections.second;
            const isThirdSelected = !!userSelections.third;
            
            // 必须选择班级、填写姓名并至少选择一个研学地点
            submitBtn.disabled = !(isClassSelected && isNameFilled && (isFirstSelected || isSecondSelected || isThirdSelected));
            
            // 按钮动画效果
            if (!submitBtn.disabled) {
                submitBtn.classList.add('animate-bounce');
                setTimeout(() => submitBtn.classList.remove('animate-bounce'), 1000);
            }
        }

        // 表单提交处理
        document.getElementById('selection-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 禁用提交按钮防止重复提交
            const submitBtn = document.getElementById('submit-btn');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i>提交中...';
            
            // 收集表单数据
            const formData = new FormData(this);
            if (userSelections.className) {
                formData.append('className', userSelections.className);
            }
    
            const data = Object.fromEntries(formData.entries());
            console.log(data);
            // 发送数据到服务器
            fetch(this.action, {
                method: 'POST',
                body: formData
            })
            .then(response => {
                // 检查响应头中的Content-Type，确保是JSON数据
                if (!response.headers.get('content-type').includes('application/json')) {
                    throw new Error('接收到的数据不是JSON格式');
                }
                return response.json();
            })
            .then(data => {
                if (data.status === 'success') {
                    showSuccessModal(data);
                } else {
                    alert('提交失败: ' + data.message);
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = '<i class="fa-solid fa-paper-plane mr-2"></i>提交选择';
                }
            })
            .catch(error => {
                alert('网络错误: ' + error.message);
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fa-solid fa-paper-plane mr-2"></i>提交选择';
            });
        });

        // 显示成功提交模态框
        function showSuccessModal(data) {
            // 创建模态框
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 flex items-center justify-center z-50 bg-black/50';
            modal.innerHTML = `
                <div class="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full mx-4 transform transition-all duration-500 scale-95 opacity-0" id="success-modal">
                    <div class="text-center">
                        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
                            <i class="fa-solid fa-check text-2xl text-green-500"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-2">提交成功!</h3>
                        <p class="text-gray-600 mb-6">您的研学地点选择已记录</p>
                        
                        <div class="space-y-3 text-left mb-6">
                            <div class="font-medium">班级: <span class="text-primary">${data.className}</span></div>
                            <div class="font-medium">学生姓名: <span class="text-primary">${data.student_name}</span></div>
                            ${data.firstChoice ? `<div class="font-medium">第一选择: <span class="text-primary">${data.firstChoice}</span></div>` : ''}
                            ${data.secondChoice ? `<div class="font-medium">第二选择: <span class="text-primary">${data.secondChoice}</span></div>` : ''}
                            ${data.thirdChoice ? `<div class="font-medium">第三选择: <span class="text-primary">${data.thirdChoice}</span></div>` : ''}
                        </div>
                        
                        <button id="close-modal" class="bg-primary hover:bg-primary/90 text-white font-bold py-2 px-6 rounded-md transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50">
                            确定
                        </button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            // 显示动画
            setTimeout(() => {
                const modalContent = document.getElementById('success-modal');
                modalContent.classList.remove('scale-95', 'opacity-0');
                modalContent.classList.add('scale-100', 'opacity-100');
            }, 10);
            
            // 关闭模态框
            document.getElementById('close-modal').addEventListener('click', () => {
                const modalContent = document.getElementById('success-modal');
                modalContent.classList.remove('scale-100', 'opacity-100');
                modalContent.classList.add('scale-95', 'opacity-0');
                
                setTimeout(() => {
                    document.body.removeChild(modal);
                    // 重置表单
                    document.getElementById('selection-form').reset();
                    userSelections = {
                        className: null,
                        studentName: '',
                        first: null,
                        second: null,
                        third: null
                    };
                    updateOptionUI();
                    updateResultsDisplay();
                    updateSubmitButton();
                }, 300);
            });
        }
    </script>